<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>灾情及地震信息显示</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card class="card1">
      <h4>信息查询</h4>
      <!-- 查询表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <!-- 时间选项 -->
        <el-form-item label="起始日期">
          <!-- 起始日期 -->
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <!-- 结束日期 -->
        <el-form-item label="结束日期">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <!-- 时间 -->
        <el-form-item label="时间">
          <el-col class="line" :span="2"></el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        <!-- 选择地区 -->
        <el-row :gutter="10" type="flex">
          <el-form-item label="地区">
            <el-select v-model="formData.provinceCode" @change="provinceChange" placeholder="省">
              <el-option
                v-for="it in provinces"
                :key="it.value"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
            <el-select
              v-model="formData.cityCode"
              @change="cityChange"
              placeholder="市"
              class="address_select"
            >
              <el-option v-for="it in cityList" :key="it.value" :label="it.label" :value="it.value"></el-option>
            </el-select>
            <el-select
              v-model="formData.areaCode"
              @change="areaChange"
              placeholder="区"
              class="address_select"
            >
              <el-option v-for="it in areaList" :key="it.value" :label="it.label" :value="it.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 卡片视图区2 -->
    <el-card class="card2">
        预测地震
      <!-- 预测表格 -->
      <el-table :data="tableData" style="width: 100%" height="500">
        <el-table-column fixed prop="id" label="序号" width="200"></el-table-column>
        <el-table-column prop="province" label="省份" width="240"></el-table-column>
        <el-table-column prop="city" label="市" width="240"></el-table-column>
        <el-table-column prop="area" label="县" width="240"></el-table-column>
        <el-table-column prop="warningRank" label="警告程度" width="300"></el-table-column>
        <el-table-column prop="reason" label="原因" width="600"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import json from "@/assets/json/place.json";

export default {
  data() {
    return {
      //获取列表的参数对象
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      provinces: json, // 省数据（一个省中包含市的信息，一个市中包含区的信息）
      cityList: [], // 某省下市的列表数据
      areaList: [], // 某市下区的列表数据
      formData: {}
    };
  },

  created() {
    this.getInfo();
  },

  methods: {
    onSubmit() {
      console.log("submit!");
    },

    async getInfo() {
      const { data: res } = await this.$http.get("", {
        params: this.form,
      });
      //if (res.meta.status !== 200) return this.$message.error('获取信息失败')
      this.console.log(res);
    },

    // 操作：选择省，把省下的市的数据筛出来
    provinceChange(event) {
      let chooseProvince = this.provinces.find((it) => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "province", chooseProvince.label);
      this.cityList = chooseProvince.children;
      this.$set(this.formData, "cityCode", "");
      this.$set(this.formData, "city", "");
      this.$set(this.formData, "areaCode", "");
      this.$set(this.formData, "area", "");
    },
    // 操作：选择市，把市下的区的数据筛出来
    cityChange(event) {
      let chooseCity = this.cityList.find((it) => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "city", chooseCity.label);
      this.areaList = chooseCity.children;
      this.$set(this.formData, "areaCode", "");
      this.$set(this.formData, "area", "");
    },
    // 操作：选择区
    areaChange(event) {
      let chooseArea = this.areaList.find((it) => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "area", chooseArea.label);
      console.log(this.formData);
    },
  },
};
</script>

<style lang="less" scoped>
</style>